<template>
  <div id="main">
    <div id="catalog-tree">
      <el-tree
        v-if="catalogData[0].children[0].children.length !== 0"
        :data="catalogData"
        show-checkbox
        node-key="id"
        :default-expand-all="expandAll"
        :default-checked-keys="['0', '1', '2', '3', '4']"
        :props="defaultProps"
        @check="checkChange"
      />
    </div>
  </div>
</template>
<script setup>
import { inject, onMounted, ref } from "vue";
let expandAll = ref(true);
let catalogData = ref([
  {
    id: "doc02",
    label: "地图文档",
    // disabled: true,
    children: [
      {
        id: "map01",
        label: "光谷地图要素",
        // disabled: true,
        children: [],
      },
    ],
  },
]);
const defaultProps = {
  children: "children",
  label: "label",
};

let $map = null;
let $docLayer = null;
const docInfos = new Zondy.Catalog.MapDoc({
  docName: "guanggu",
});

// 获取图层
docInfos.getLayersInfo((data) => {
  // console.log(data)
  let catalogItem = [];
  data.value.forEach((item) => {
    let { LayerIndex, Name } = item;
    catalogItem.push({
      id: LayerIndex,
      label: Name,
    });
  });
  catalogData.value[0].children[0].children = catalogItem;
});
// 控制图层显隐
const checkChange = (evt, checked) => {
  let index = evt.id;
  let checkedKeys = checked.checkedKeys;
  let res = checkedKeys.includes(index);
  $docLayer.setLayerStatus([index], res ? "include" : "exclude");
};
onMounted(() => {
  $map = inject("$map");
  $docLayer = inject("$docLayer");
});
</script>

<style scoped>
/* #main{
  padding: 6px;
  margin-top:7px;
  border: 1px solid white;
}
#catalog-tree{
  background-color:#6688b1 ;
} */


/* <style scoped lang="scss"> */
</style>
